<script setup lang="ts">
import ThreeFlowChart from './components/ThreeFlowChart.vue'
</script>

<template>
  <div class="w-full h-full bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900">
    <!-- 标题栏 -->
    <div class="absolute top-0 left-0 right-0 z-10 flex justify-center items-center h-16 bg-gradient-to-r from-blue-800/20 to-purple-800/20 backdrop-blur-sm border-b border-cyan-500/30">
      <h1 class="text-2xl font-bold text-cyan-300 tracking-wider">安全风险态势</h1>
      <div class="absolute top-4 right-6 text-cyan-400 text-sm">
        {{ new Date().toLocaleString('zh-CN') }}
      </div>
    </div>
    
    <!-- 3D流程图主体 -->
    <div class="w-full h-full pt-16">
      <ThreeFlowChart />
    </div>
    
    <!-- 左侧信息面板 -->
    <div class="absolute left-4 top-20 w-80 space-y-4 z-10">
      <!-- 安全事件概览 -->
      <div class="bg-blue-900/30 backdrop-blur-sm border border-cyan-500/30 rounded-lg p-4">
        <h3 class="text-cyan-300 text-lg font-semibold mb-3 flex items-center">
          <div class="w-2 h-2 bg-cyan-400 rounded-full mr-2"></div>
          安全事件概览
        </h3>
        <div class="grid grid-cols-3 gap-3">
          <div class="text-center">
            <div class="text-2xl font-bold text-red-400">3</div>
            <div class="text-xs text-gray-400">高危事件</div>
          </div>
          <div class="text-center">
            <div class="text-2xl font-bold text-yellow-400">512</div>
            <div class="text-xs text-gray-400">中危事件</div>
          </div>
          <div class="text-center">
            <div class="text-2xl font-bold text-blue-400">58</div>
            <div class="text-xs text-gray-400">低危事件</div>
          </div>
        </div>
      </div>
      
      <!-- 系统状态监控 -->
      <div class="bg-blue-900/30 backdrop-blur-sm border border-cyan-500/30 rounded-lg p-4">
        <h3 class="text-cyan-300 text-lg font-semibold mb-3 flex items-center">
          <div class="w-2 h-2 bg-green-400 rounded-full mr-2"></div>
          系统状态监控
        </h3>
        <div class="space-y-2">
          <div class="flex justify-between items-center">
            <span class="text-gray-300 text-sm">CPU使用率</span>
            <span class="text-green-400 text-sm">45%</span>
          </div>
          <div class="w-full bg-gray-700 rounded-full h-2">
            <div class="bg-green-400 h-2 rounded-full" style="width: 45%"></div>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-gray-300 text-sm">内存使用率</span>
            <span class="text-yellow-400 text-sm">78%</span>
          </div>
          <div class="w-full bg-gray-700 rounded-full h-2">
            <div class="bg-yellow-400 h-2 rounded-full" style="width: 78%"></div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 右侧信息面板 -->
    <div class="absolute right-4 top-20 w-80 space-y-4 z-10">
      <!-- 网络流量统计 -->
      <div class="bg-blue-900/30 backdrop-blur-sm border border-cyan-500/30 rounded-lg p-4">
        <h3 class="text-cyan-300 text-lg font-semibold mb-3 flex items-center">
          <div class="w-2 h-2 bg-purple-400 rounded-full mr-2"></div>
          网络流量统计
        </h3>
        <div class="space-y-3">
          <div class="flex justify-between">
            <span class="text-gray-300 text-sm">入站流量</span>
            <span class="text-cyan-400 text-sm">1.2GB/s</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-300 text-sm">出站流量</span>
            <span class="text-cyan-400 text-sm">856MB/s</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-300 text-sm">连接数</span>
            <span class="text-cyan-400 text-sm">2,847</span>
          </div>
        </div>
      </div>
      
      <!-- 威胁检测TOP5 -->
      <div class="bg-blue-900/30 backdrop-blur-sm border border-cyan-500/30 rounded-lg p-4">
        <h3 class="text-cyan-300 text-lg font-semibold mb-3 flex items-center">
          <div class="w-2 h-2 bg-red-400 rounded-full mr-2"></div>
          威胁检测TOP5
        </h3>
        <div class="space-y-2">
          <div class="flex justify-between items-center text-sm">
            <span class="text-gray-300">SQL注入攻击</span>
            <span class="text-red-400">152次</span>
          </div>
          <div class="flex justify-between items-center text-sm">
            <span class="text-gray-300">XSS攻击</span>
            <span class="text-orange-400">89次</span>
          </div>
          <div class="flex justify-between items-center text-sm">
            <span class="text-gray-300">暴力破解</span>
            <span class="text-yellow-400">67次</span>
          </div>
          <div class="flex justify-between items-center text-sm">
            <span class="text-gray-300">恶意文件上传</span>
            <span class="text-blue-400">34次</span>
          </div>
          <div class="flex justify-between items-center text-sm">
            <span class="text-gray-300">异常访问</span>
            <span class="text-green-400">21次</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部状态栏 -->
    <div class="absolute bottom-0 left-0 right-0 z-10 h-12 bg-gradient-to-r from-blue-800/20 to-purple-800/20 backdrop-blur-sm border-t border-cyan-500/30 flex items-center justify-between px-6">
      <div class="flex items-center space-x-6 text-sm text-gray-300">
        <div class="flex items-center">
          <div class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></div>
          系统运行正常
        </div>
        <div>在线设备: 127台</div>
        <div>离线设备: 3台</div>
      </div>
      <div class="text-sm text-gray-400">
        最后更新: {{ new Date().toLocaleTimeString('zh-CN') }}
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 自定义动画 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>
